<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="../../common/header.jsp"></jsp:include>
<script type="text/javascript" src="static/js/jsonlint.js"></script>
<script type="text/javascript" src="static/js/jquery.json.js"></script>
<script type="text/javascript">
	function showFileName(file){
		var url = file.value.split("\\");
		$(file).parent().find("span").text("文件:"+url[url.length-1]);
	}
	function ajaxUpload(formId){
		$("#"+formId).ajaxSubmit({
			type:"post",
			url:"file/ajaxForm4",
			dataType:"json",
			success:function(data){
				JsonConsoleProcess(JSON.stringify(data));
			}
		});
	}
	function ajaxWithPara(formId){
		$("#"+formId).ajaxSubmit({
			type:"post",
			url:"file/ajaxForm5",
			dataType:"json",
			data:$("#"+formId).serialize(),
			success:function(data){
				JsonConsoleProcess(JSON.stringify(data));
			}
		});
	}
	function JsonConsoleProcess(data){
		if(data!=""){
	            result = new JSONFormat(data,4).toString();
		}
		$("#Canvas").html(result);
	}
</script>
<div id="main" class="container">
	<div class="row">
		<div class="col-lg-6 col-sm-6 col-md-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					1.普通form文件上传
				</div>
				<div class="panel-body">
					<form action="file/formNormal" method="post" enctype="multipart/form-data">
						<div class="form-group">
							<input type="file" class="form-control" name="file1">
						</div>
						<button type="submit" class="btn btn-primary">文件上传</button>
					</form>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-6 col-md-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					2.普通form文件上传  -带参数
				</div>
				<div class="panel-body">
					<form action="file/formwithparam" method="post" enctype="multipart/form-data">
						<div class="form-group">
							<input type="file" class="form-control" name="file1">
						</div>
						<div class="form-group">
							<label>参数值:</label>
							<input type="text" class="form-control" name="param">
						</div>
						<button type="submit" class="btn btn-primary">文件上传</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
	<div class="col-lg-12 col-sm-12 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					3.form表单上传文件 隐藏按钮
				</div>
				<div class="panel-body">
					<form action="file/formNormal" method="post" enctype="multipart/form-data">
						<div class="form-group">
						<label class="btn btn-default">
						<span>选择一个文件</span>
						<input type="file" onchange="showFileName(this)" name="file1" class="form-control" style="display:none;">
						</label>
							<button type="submit" class="btn btn-primary">开始上传</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6 col-sm-6 col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						4.Ajax上传文件 需要  jquery.json.js
					</div>
					<div class="panel-body">
						<form id="ajaxForm4" action="file/formNormal" method="post" enctype="multipart/form-data">
							<div class="form-group">
								<input type="file" class="form-control" name="file1">
							</div>
							<button type="button" onclick="ajaxUpload('ajaxForm4')" class="btn btn-primary">文件上传</button>
						</form>
					</div>
				</div>
			</div>
			<div class="col-lg-6 col-sm-6 col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						结果文件
					</div>
					<div class="panel-body">
						<div id="Canvas" class="Canvas"></div>
					</div>
				</div>
			</div>
	</div>
	<div class="row">
		<div class="col-lg-6 col-sm-6 col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						5.ajax  -带参数上传
					</div>
					<div class="panel-body">
						<form action="file/formwithparam" id="ajaxPara" method="post" enctype="multipart/form-data">
							<div class="form-group">
								<input type="file" class="form-control" name="file1">
							</div>
							<div class="form-group">
								<label>参数值:</label>
								<input type="text" class="form-control" name="param">
							</div>
							<button type="button" onclick="ajaxWithPara('ajaxPara')" class="btn btn-primary">文件上传</button>
						</form>
					</div>
				</div>
		</div>
	</div>
</div>
<jsp:include page="../../common/footer.jsp"></jsp:include>